<template>
  <div class="content">
    <dt-search ref="search" :labelWidth="100">
      <Button type="primary" @click="toLog" v-if="unlocking('0216010100')">抢客记录</Button>
    </dt-search>
    <dt-grid ref="table" page :onFetch="onFetch">
      <div class="flex btn-content" slot="btn">
        <div class="handles">
          <Button
            type="primary"
            v-if="unlocking('0216010200')"
            @click="exportData('0')"
            :disabled="total == 0">
            导出Excel
          </Button>
          <Button
            type="primary"
            v-if="unlocking('0216010300')"
            @click="exportData('1')"
            style="margin-left: 8px"
            :disabled="total == 0">
            全号导出
          </Button>
        </div>
      </div>
    </dt-grid>
  </div>
</template>
<script>
  import columnOpt from './opt/column'
  import searchOpt from './opt/search'
  import apiMgr from './opt/index.js'

  export default {
    components: {},
    data() {
      return {
        searchInfo: {
          orgIds: [],
          buildingName: ''
        },
        filterParams: {},
        total: 0
      }
    },
    mounted() {
      this.$refs.search.init(this.$refs.table, new searchOpt(this), this.searchInfo)
      this.$refs.table.init(this, new columnOpt(this))
      this.$refs.table.fetch()
    },
    methods: {
      onFetch(data) {
        let params = {
          ...data
        }
        this.filterParams = params
        return apiMgr.list(params).then((res) => {
          res.list = res.records
          this.total = res.total
          return res
        })
      },

      exportData(mask) {
        apiMgr.exportList({ ...this.filterParams, maskCustomerPhone: mask })
      },
      toLog() {
        this.$router.push({
          name: 'customerLog',
          params: {}
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .content {
    padding: 20px;
  }
</style>
